<template>
	<view class="newsbox">
		<view class="pic">
			<image :src="item.picurl" mode="aspectFill"></image>
		</view>
		<view class="text">
			<view class="title">
				{{ item.title }}
			</view>
			<view class="info" v-if="!item.looktime">
				<text>{{ item.author }}</text>
				<text>{{ item.hits }}浏览</text>
			</view>
			<view class="info" v-else>
				<text>浏览时间：{{ item.looktime }} </text>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		name:"newsbox",
		props: {
			item: {
				type: Object,	// 规定接收到的参数的数据类型
				default(){		// 规定默认值，如果当前组件的父组件没有传递参数，那么就采用这里定义的默认数据
					return {
						title: '组件内默认的标题',
						author: '彭于晏',
						hits: 668,
						picurl: '../../static/image/nopic.jpg',
						looktime: '2023-9-8 10:07:20'
					}
				}
			}
		},
		data() {
			return {
				
			};
		}
	}
</script>

<style lang="scss">
.newsbox {
	display: flex;
	.pic {
		width: 230rpx;
		height: 160rpx;
		
		image {
			width: 100%;
			height: 100%
		}
	}
	.text {
		 flex: 1;
		 padding-left: 20rpx;
		 display: flex;
		 flex-direction: column;
		 justify-content: space-between;
		 .title {
			 font-size: 36rpx;
			 color: #333;
			 overflow: hidden;
			 text-overflow: ellipsis;	// 文本溢出内容用省略号表示
			 display: -webkit-box;		// 特别显示模式
			 -webkit-line-clamp: 2;		// 行数
			 line-clamp: 2;
			 -webkit-box-orient: vertical;		// 盒子中的内容呈竖直排列
		 }
		 .info {
			 font-size: 26rpx;
			 color: #999;
			
			text {
				padding-right: 30rpx;
			}
		 }
	}
}
</style>